@charset "UTF-8";
* {
    margin: 0;
    padding: 0;
}

html,
body {
    font-size: 62.5%;
    font-family: "微软雅黑";
}

header {
    width: 100%;
    height: 78px;
    background: #1C1C1C;
    display: flex;
    p {
        font-size: 24px;
        color: #F1C40F;
        margin-left: 300px;
        line-height: 78px;
    }
    span {
        font-size: 12px;
        color: #cda303;
        font-family: "微软雅黑";
        margin-left: 130px;
        line-height: 78px;
    }
    ul {
        width: 100%;
        list-style: none;
        display: flex;
        margin-left: 78px;
        justify-content: space-around;
        line-height: 78px;
        li {
            font-size: 12px;
            color: #727271;
            font-family: "微软雅黑";
        }
        li:hover {
            border-bottom: 5px solid #CEA713;
        }
    }
}

.div1 {
    width: 100%;
    height: 48px;
    background: #3C3A3B;
    p {
        color: #727271;
        font-size: 14px;
        text-align: center;
        line-height: 48px;
        margin-right: -424px;
        span {
            color: #F1C40F;
            font-size: 14px;
        }
    }
}

//.div2{
//  width: 100%;
//  .box1{
//      width: 398px;
//      height: 338px;
//      background: #8C8C8C;
//      float: left;
//      margin-left: 230px;
//  }
//  .box2{
//      width: 398px;
//      height: 338px;
//      background: #8C8C8C;
//      float: right;
//      margin-right: 280px;
//  }
//}
.div2 {
    width: 1073px;
    margin: 0 auto;
    .box1 {
        position: relative;
        width: 1007px;
        .left {
            width: 398px;
            height: 339px;
            border-bottom: 4px solid #F1C40F;
            background: #8c8c8c;
            margin-top: 50px;
            padding-top: 39px;
            padding-left: 137px;
            position: relative;
            img {
                width: 60%;
            }
            .img {
                width: 38px;
                height: 38px;
                background: #bcbcbc;
                padding-top: 10px;
                padding-left: 8px;
                position: absolute;
                right: 0;
                bottom: 0;
                img {
                    width: 22px;
                    height: 24px;
                }
            }
        }
        .right {
            width: 489px;
            //          border: 1px solid black;
            position: absolute;
            right: -80px;
            bottom: 0px;
            p:nth-of-type(1) {
                font-size: 22px;
                color: #3c3a3a;
            }
            p:nth-of-type(2) {
                font-size: 34px;
                color: #ed5565;
                span {
                    font-size: 42px;
                    color: #ed5565;
                }
            }
            .box2 {
                margin-top: 15px;
                span {
                    font-size: 12px;
                    color: #3C3A3A;
                }
                button {
                    width: 26px;
                    height: 36px;
                }
                input {
                    width: 43px;
                    height: 28px;
                    font-size: 14px;
                    color: #8c8c8c;
                    text-align: center;
                }
            }
            p:nth-of-type(3) {
                margin-top: 15px;
                font-size: 14px;
                color: #3c3a3a;
            }
            .box33 {
                margin-top: 20px;
                p {
                    color: #3C3A3A;
                    font-size: 12px;
                }
            }
            .box44 {
                margin-top: 14px;
                button:nth-of-type(1) {
                    width: 126px;
                    height: 36px;
                    border-radius: 2px;
                    background: #ed5564;
                    border: 1px solid #ED5564;
                    color: white;
                    font-size: 12px;
                }
                button:nth-of-type(2) {
                    width: 126px;
                    height: 36px;
                    border-radius: 5px;
                    background: white;
                    border: 1px solid #ED5564;
                    color: #ED5564;
                    font-size: 12px;
                    margin-left: 10px;
                }
            }
        }
    }
}

.div3 {
    width: 1070px;
    height: 58px;
    background: #ffdc4e;
    margin: 0 auto;
    margin-top: 50px;
    display: flex;
    border-bottom: 2px solid #elc243;
    .p1 {
        width: 142px;
        height: 58px;
        background: #eac948;
        font-size: 10px;
        color: #5e5e5e;
        font-family: "微软雅黑";
        font-weight: bold;
        text-align: center;
        line-height: 58px;
    }
    .p2 {
        width: 142px;
        height: 58px;
        font-size: 10px;
        color: #5e5e5e;
        font-family: "微软雅黑";
        font-weight: bold;
        text-align: center;
        line-height: 58px;
    }
}

.div4 {
    width: 1070px;
    height: 32px;
    background: #a4aeb8;
    border-bottom: 2px solid #94999f;
    display: flex;
    margin: 0 auto;
    input {
        width: 20px;
        height: 20px;
        margin-left: 10px;
        margin-top: 5px;
    }
    ul {
        width: 100%;
        display: flex;
        justify-content: space-around;
        list-style: none;
        li {
            font-size: 10px;
            color: #FFFFFF;
            line-height: 32px;
        }
    }
}

//.div5{
//  width: 1070px;
//  height: 50px;
//  background: #FFFFFF;
//  margin: 0 auto;
//  p{
//      font-size: 12px;
//      color: #a4a9ae;
//      line-height: 50px;
//      text-align: center;
//      margin-left: 300px;
//      span{
//          margin-left: 80px;
//      }
//  }
//}
//.div6{
//  width: 1070px;
//  height: 50px;
//  background: #f7f8fa;
//  margin: 0 auto;
//}
.box77 {
    width: 1070px;
    margin: 0 auto;
    ul {
        width: 100%;
        li:nth-of-type(1) {
            width: 100%;
            height: 50px;
            background: white;
            font-size: 12px;
            color: #a4a9ae;
            line-height: 50px;
            p:nth-of-type(1) {
                float: left;
                margin-left: 560px;
            }
            p:nth-of-type(2) {
                float: left;
                margin-left: 120px;
            }
        }
        li:nth-of-type(2) {
            width: 100%;
            height: 50px;
            background: #f7f8fa;
            font-size: 12px;
            color: #a4a9ae;
            line-height: 50px;
            p:nth-of-type(1) {
                float: left;
                margin-left: 560px;
            }
            p:nth-of-type(2) {
                float: left;
                margin-left: 28px;
            }
            p:nth-of-type(3) {
                float: left;
                margin-left: 58px;
            }
            p:nth-of-type(4) {
                float: left;
                margin-left: 28px;
            }
            p:nth-of-type(5) {
                float: left;
                margin-left: 58px;
            }
            p:nth-of-type(6) {
                float: left;
                margin-left: 28px;
            }
        }
        li:nth-of-type(3) {
            width: 100%;
            height: 50px;
            background: #FFFFFF;
            font-size: 12px;
            color: #a4a9ae;
            line-height: 50px;
            input {
                float: left;
                margin-top: 17px;
                margin-left: 20px;
            }
            p:nth-of-type(1) {
                float: left;
                margin-left: 20px;
            }
            p:nth-of-type(2) {
                float: left;
                margin-left: 99px;
            }
            p:nth-of-type(3) {
                float: left;
                margin-left: 183px;
            }
            p:nth-of-type(4) {
                float: left;
                margin-left: 138px;
            }
            p:nth-of-type(5) {
                float: left;
                margin-left: 44px;
            }
            p:nth-of-type(6) {
                float: left;
                margin-left: 73px;
            }
            p:nth-of-type(7) {
                float: left;
                margin-left: 42px;
            }
            p:nth-of-type(8) {
                float: left;
                margin-left: 70px;
            }
            p:nth-of-type(9) {
                float: left;
                margin-left: 30px;
            }
        }
        li:nth-of-type(4) {
            width: 100%;
            height: 50px;
            background: #f7f8fa;
            font-size: 12px;
            color: #a4a9ae;
            line-height: 50px;
            input {
                float: left;
                margin-top: 17px;
                margin-left: 20px;
            }
            p:nth-of-type(1) {
                float: left;
                margin-left: 20px;
            }
            p:nth-of-type(2) {
                float: left;
                margin-left: 99px;
            }
            p:nth-of-type(3) {
                float: left;
                margin-left: 183px;
            }
            p:nth-of-type(4) {
                float: left;
                margin-left: 138px;
            }
            p:nth-of-type(5) {
                float: left;
                margin-left: 44px;
            }
            p:nth-of-type(6) {
                float: left;
                margin-left: 73px;
            }
            p:nth-of-type(7) {
                float: left;
                margin-left: 42px;
            }
            p:nth-of-type(8) {
                float: left;
                margin-left: 70px;
            }
            p:nth-of-type(9) {
                float: left;
                margin-left: 40px;
            }
        }
        li:nth-of-type(5) {
            width: 100%;
            height: 50px;
            background: #f7f8fa;
            font-size: 12px;
            color: #a4a9ae;
            line-height: 50px;
            input {
                float: left;
                margin-top: 17px;
                margin-left: 20px;
            }
            p:nth-of-type(1) {
                float: left;
                margin-left: 20px;
            }
            p:nth-of-type(2) {
                float: left;
                margin-left: 99px;
            }
            p:nth-of-type(3) {
                float: left;
                margin-left: 183px;
            }
            p:nth-of-type(4) {
                float: left;
                margin-left: 138px;
            }
            p:nth-of-type(5) {
                float: left;
                margin-left: 44px;
            }
            p:nth-of-type(6) {
                float: left;
                margin-left: 73px;
            }
            p:nth-of-type(7) {
                float: left;
                margin-left: 42px;
            }
            p:nth-of-type(8) {
                float: left;
                margin-left: 70px;
            }
            p:nth-of-type(9) {
                float: left;
                margin-left: 40px;
            }
        }
    }
}
.div5{
    width: 1072px;
    height: 50px;
    background: #ffdc4e;
    margin: 0 auto;
    p{
        font-size: 10px;
        font-family: "微软雅黑";
        font-weight: bold;
        margin-left: 20px;
        line-height: 50px;
    }
}
.div6{
    width: 1072px;
    margin: 0 auto;
    margin-top: 24px;
    ul{
        width: 1072px;
        display: flex;
        justify-content: space-around;
        list-style: none;
        li{
            width: 346px;
            height: 254px;
//          border: 1px solid red;
            background: url(../img/矩形6副本3.png);
            img{
               margin-left: 100px;
            }
            p{
              font-size: 10px;
              color: #3C3A3A;  
            }
        }
    }
}
.yuan{
     width: 80px;
     height: 60px;
     border-radius: 50%;
     background: url(../img/椭圆1.png)no-repeat;
     
     img{
        position: relative;
        left: 15px;
        top: 15px;
     }
}
.div7{
    width: 100%;
    height: 100px;
    background: #222222;
    margin-top: 10px;
    p{
        font-size: 10px;
        color: #555555;
        text-align: center;
        line-height: 100px;
    }
}
